<template>
	<van-tabbar class="my-tabbar" z-index="999" active-color="#7d7e80" :active="active" @change="changeTab">
	  <van-tabbar-item v-for="(item,index) in list" :key="index">
	    <image
		   v-if="index !=1"
	      :slot="active == index?'icon-active':'icon'"
	      :src="active == index?item.selectedIconPath:item.iconPath"
	      mode="aspectFit"
	      style="width: 25px; height: 25px;"
	    />
		<image
		   v-else
		  :slot="active == index?'icon-active':'icon'"
		  :src="active == index?item.selectedIconPath:item.iconPath"
		  mode="aspectFit"
		  style="width: 38px; height: 38px;border-radius: 50%;margin-top:6px;"
		  :style="{border:active == index?'2px solid #f5e37e':'2px solid #f1f1f1'}"
		/>
	
	     {{item.text}}
	  </van-tabbar-item>
	</van-tabbar>

	
</template>

<script>

export default {
	name: "tabbar",
	props:{
		current:{
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			active: 0,
			list: [
			  {
			    "pagePath": "/pages/index/index",
			    "iconPath": "/static/index.png",
			    "selectedIconPath": "/static/index1.png",
			    "text": "首页"
			  },
			  {
			    "pagePath": "/pages/aboutUs/index",
			    "iconPath": "/static/aboutUs.png",
			    "selectedIconPath": "/static/aboutUs.png",
			    "text": ""
			  },
			  {
			    "pagePath": "/pages/ownr/index",
			    "iconPath": "/static/ownr.png",
			    "selectedIconPath": "/static/ownr1.png",
			    "text": "我的"
			  }
			]

		}
	},

	created() {
		//隐藏tabbar
		// uni.hideTabBar();
	},
	mounted() {
		this.active = this.current;
	},
	methods: {
		changeTab(e) {
			// this.active = e.detail;
			uni.switchTab({
				url:this.list[e.detail].pagePath,
			})
		}
	}


}

</script>

<style scoped >

</style>
